<template>
    <div>
        <div class="content">
            <ul class="content_lable" v-for="(item,index) in lable" :key="index">
                <li>{{item.name}}</li>
                <li class="c_r">{{item.val}}</li>
            </ul>
        </div>
        <!-- 成交率漏斗 -->
        <div class="echarts echarts_mar">
            <div class="echarts_title">成交率漏斗</div>
            <div class="echarts_funnel"></div>
        </div>
        <!-- 客户兴趣占比 -->
        <div class="echarts echarts_mar">
            <div class="echarts_title">客户兴趣占比</div>
            <div class="echarts_pie"></div>
        </div>
        <!-- 进十五日客户活跃度 -->
        <div class="echarts echarts_mar">
            <div class="echarts_title">进十五日客户活跃度</div>
            <div class="echarts_line"></div>
        </div>
        <!-- 进十五日客户活跃度 -->
        <!-- <div class="echarts echarts_mar">
            <div class="echarts_title">进十五日客户点击量</div>
            <div class="echarts_bar"></div>
        </div> -->
        <div class="echarts_bottom">
      <div class="echarts_title">近十五日客户点击量</div>
      <div class="echarts_bottom_div" v-for="(item,index) in activityBarGraphList" :key="index">
        <h6 style=" font-weight: 400">{{item.title}}</h6>
        <span :style="{width:`${item.rate*60/100}vw`}"></span>
        <li>{{item.rate}}%</li>
      </div>
    </div>
    </div>
</template>

<script>
let echarts = require("../../../node_modules/echarts/lib/echarts");
//引入T形图组件
require("../../../node_modules/echarts/lib/chart/funnel");
//引入折线图
require("../../../node_modules/echarts/lib/chart/line");
//引入环形图
require("../../../node_modules/echarts/lib/chart/pie");
//引入柱状图
require("../../../node_modules/echarts/lib/chart/bar");
//引入legent
require("../../../node_modules/echarts/lib/component/legendScroll");

import Common from "../../assets/js/common.js";
let Mycommon = new Common();

export default {
  props: ["tabs",'id'],
  data() {
    return {
      activityBarGraphList:[],
      lable: []
    };
  },
  created(){
    this.Jiugongge()
    this.echartsData()
  },
  mounted() {
    var drawLine = this.drawLine();
    var echarts_line = this.echarts_line();
    var echarts_pie = this.echarts_pie();
    var echarts_bar = this.echarts_bar();

    //重绘，窗口大小改动时
    window.onresize = function temp() {
      drawLine.resize();
      echarts_line.resize();
      echarts_pie().resize();
      echarts_bar().resize();
    };
  },
  methods: {
    //九宫格data
    Jiugongge() {
      let that = this;
      Mycommon.http({
        url: "BossRadarNine",
        data: {
          type: that.id
        },
        success(res) {
          // console.log(res)
          let data = res.data.data;
          let aa = [];
          let bb = [
            { name: "新增客户数" },
            { name: "浏览客户数" },
            { name: "跟进客户数" },
            { name: "沟通客户数" },
            { name: "商城销售金额" },
            { name: "商城订单数" },
            { name: "被转发次数" },
            { name: "被保存次数" },
            { name: "被点赞次数" }
          ];
          for (let name in data) {
            data[name] = data[name] || "0";
            aa.push({ val: data[name] });
          }

          aa.forEach((val, index) => {
            aa[index].name = bb[index].name;
          });
          that.lable = aa;

          // console.log("九宫格加载完成。。。");
        }
      });
    },//九宫格data
    echartsData() {
      let that = this;
      Mycommon.http({
        url: "BossStaffAnalysis",
        success(res) {
          let list = res.data.data
          // console.log(list)
          let data = []
          //漏斗图
          let dealRateName = ['总用户数','总成交数','跟进总数']
          let dealRateList = []
          //兴趣占比
          let interestName = ['对公司感兴趣','对产品感兴趣','对员工感兴趣']
          let interestList = []
          //客户活跃度
          let activityName = []
          let activityList = []

          let activityBarGraphName = []
          let activityBarGraphList = []

          for(let i in list){
            if(i == 'dealRate'){
              let dealRatelist = list[i]
              let dealRateindex = 4
              for(let i in dealRatelist){
                dealRateindex--
                dealRateList.push({num:dealRatelist[i],value:dealRateindex})
              }
              dealRateList.forEach((val,index)=>{
                val.name = `${dealRateName[index]}:${val.num}`
                dealRateName[index] = val.name
              })
              // console.log(dealRateList)
            }else if(i == 'interest'){
              let interestlist = list[i]
              for(let i in interestlist){
                interestList.push({value:interestlist[i].number})
              }
              interestList.forEach((val,index)=>{
                val.name = interestName[index]
              })
            }else if(i == 'activity'){
              let activitylist = list[i]
              activitylist.forEach((val,index)=>{
                activityName.push(val.date.substring(5))
                activityList.push(val.number)
              })
            }else if(i == 'activityBarGraph'){
              let activityBarGraphlist = list[i]
              that.activityBarGraphList = list[i]
              // console.log(that.activityBarGraphList)
              // activityBarGraphlist.forEach((val,index)=>{
              //   activityBarGraphName.push(val.title)
              //   activityBarGraphList.push(val.number)
              // })
            }
          }


          that.drawLine(dealRateName,dealRateList)
          that.echarts_pie(interestName,interestList)
          that.echarts_line(activityName,activityList)

          // that.echarts_bar(activityBarGraphName,activityBarGraphList)
        }
      });
    },
    //漏斗图
    drawLine(val1,val2) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_funnel")[0]
      );
      // 绘制图表
      let option = {
        color: ["#91c7ae", "#d48265", "#c23531"],
        legend: {
          data: val1,
          bottom: 20,
          itemGap: 30
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "20%",
            top: "0%",
            bottom: "40%",
            width: "60%",
            // min: 10,
            // max: 100,
            minSize: "30%",
            maxSize: "100%",
            label: {
              normal: {
                show: true,
                position: "inside"
              }
            },
            itemStyle: {},
            data: val2
          }
        ]
      };
      myChart.setOption(option);
    },
    //客户兴趣暂避bar
    echarts_pie(val1,val2) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_pie")[0]
      );
      // 绘制图表
      let option = {
        color: ["#c23531", "#2f4554", "#91c7ae"],
        legend: {
          bottom: 30,
          itemGap: 20,
          data: val1
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            center: ["50%", "40%"],
            radius: ["35%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outside"
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: val2
          }
        ]
      };
      myChart.setOption(option);
    },
    //进十五日客户活跃度
    echarts_line(val1,val2) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_line")[0]
      );
      // 绘制图表
      let option = {
        color: ["#f6acac", "#d48265", "#c23531"],
        xAxis: {
          gridIndex: "0",
          type: "category",
          boundaryGap: false,
          data: val1
        },
        yAxis: [
          {
            type: "value",
            position: "left"
          }
        ],
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true
        },
        series: [
          {
            data: val2,
            type: "line",
            areaStyle: { normal: {} }
            // label: {
            //   normal: {
            //     show: true,
            //     position: "top"
            //   }
            // }
          }
        ]
      };
      myChart.setOption(option);
    },
    //进十五日客户活跃度
    echarts_bar(val1,val2) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("echarts_bar")[0]
      );
      // 绘制图表
      let option = {
        color: [
          "#ff8a00",
          "#ffb400",
          "#ffde00",
          "#5b5b5b",
          "#9e9e9e",
          "#e7e7e7"
        ],
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          top: "0",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: val1
        },
        series: [
          {
            barWidth: "20",
            type: "bar",
            data: val2,
            label: {
              show: true,
              position: "right"
            }
            // itemStyle:{
            //   color:'#fff'
            // }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.content {
  width: 750px;
  height: 750px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.content_lable {
  width: 208px;
  height: 208px;
  margin: 15px;
  border: 1px solid #e9e9e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #969696;
}
.c_r {
  color: #e93636;
  font-size: 34px;
  font-weight: 700;
  padding: 10px;
}

.echarts_mar {
  margin-top: 20px;
}
.echarts {
  width: 100vw;
  min-height: 460px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.echarts_title {
  height: 160px;
  display: flex;
  align-items: center;
  font-size: 32px;
}
.echarts_funnel {
  width: 100vw;
  height: 300px;
}
.echarts_line {
  width: 100vw;
  height: 600px;
}
.echarts_tabs {
  width: 60%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.echarts_tabs ul {
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid #e9e9e9;
}
.echarts_tabs .sel {
  border-color: #e93636;
  color: #e93636;
}
.echarts_pie {
  width: 100vw;
  height: 500px;
}
.echarts_bar {
  width: 100vw;
  height: 500px;
}

.echarts_bottom {
  width: 100vw;
  min-height: 100px;
  background: #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.echarts_bottom_div {
  width: 90vw;
  height: 60px;
  display: flex;
  align-items: center;
}
.echarts_bottom_div h6 {
  width: 22vw;
}
.echarts_bottom_div span {
  width: 70vw;
  height: 30px;
  background: #f7adad;
  border-radius: 20px;
  margin-right: 20px;
}
</style>
